<template>
	<view class="template-integral tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background: linear-gradient(180deg, #FEF5E4, #F9FFF9);">
			<view class="tn-padding-top-xl">
				<view class="tn-flex adver-wrap ">
					<view class="tn-text-center tn-flex-1">
						<view class="tn-text-xxl tn-text-bold">{{wallet.yuE}}</view>
						<view class="tn-text-lg  tn-padding-left-xs" style="">可提现</view>
					</view>
					<view class="tn-text-center tn-flex-1">
						<view class="tn-text-xxl tn-text-bold">{{wallet.cashE}}</view>
						<view class="tn-text-lg tn-padding-left-xs" style="">提现待到账</view>
					</view>
					<view class="tn-text-center tn-flex-1">
						<view class="tn-text-xxl tn-text-bold">{{wallet.suoE}}</view>
						<view class="tn-text-lg tn-padding-left-xs" style="">锁定金额</view>
					</view>
				</view>
				<view class="tn-padding-top-xl">
					<view class="tn-text-center tn-color-gray"> 
					</view>
				</view>

			</view>
		</view>


		<view class="tn-margin">
			<view class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur"
				style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">

				<view class="tn-margin-left">
					<view class='title' style="color: #F1C68E;">
						<text class="tn-text-bold tn-text-xl">提现账号</text>
						<!-- <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text> -->
					</view>
					<view class='tn-color-white tn-padding-top-sm'>{{wallet.account}}</view>
				</view>
				<view class="tn-margin-right">
					<tn-button shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0"
						width="160rpx" shadow @click="show1 = true">
						<!-- <text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text> -->
						<text class="tn-text-bold">换 卡</text>
					</tn-button>
				</view>

			</view>
		</view>



		<view class="tn-margin tn-padding-top-xl">
			<view class="tn-bg-gray--light tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<text class="tn-flex tn-text-xl tn-padding-right-xs">￥</text>
				<input placeholder="请输入提现金额" name="input"  placeholder-style="color:#AAAAAA" v-model="cash.money"></input>
			</view>
		</view>
		
		<view class="tn-strip-bottom"></view>
		
		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					交易详细
				</view>
			</view>
		</view>
		<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" style="margin-top: 5rpx;" >
		  <tn-swipe-action>
		    <tn-swipe-action-item v-for="(item,index) in walletInfo" :key="index" :name="index" :options="options">
		      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" v-if="item.type != 4">
		        <view class="justify-content-item">
		          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		        
		            <view class="tn-padding-right tn-color-black">
		              <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		                {{item.money}}
		              </view>
		              <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
		                <text class="tn-color-grey" v-if="item.type == 1">充值</text>
						<text class="tn-color-grey" v-if="item.type == 2">付款</text>
						<text class="tn-color-grey" v-if="item.type == 3">取消订单</text>
						<text class="tn-color-grey" v-if="item.type == 4">确认付款</text>
						<text class="tn-color-grey" v-if="item.type == 5">完成订单</text>
		              </view>
		            </view>
		          </view>
		        </view>
		        <view class="justify-content-item">
		          <view class="tn-flex tn-flex-row-right">
		            <view class="">{{item.createTime}}</view>
		          </view>
		        </view>
		      </view>
			  <!-- 边距间隔 -->
			  <view class="tn-strip-bottom" v-if="index != walletInfo.length - 1"></view>
		    </tn-swipe-action-item>
		  </tn-swipe-action>
		</view>


		<!-- 悬浮按钮-->
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="cashAccount">
					<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
					<text class="tn-color-white">确认提现</text>
					<!-- <text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text> -->
				</tn-button>
			</view>
		</view>
		
		<tn-modal v-model="show1" :custom="true" :showCloseBtn="true" >
			<view class="custom-modal-content">
				<view class="">
					<view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">提现卡号</view>
					<view class="tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
						<tn-input placeholder="请输入账号" name="input" v-model="cash.account" inputAlign="left"></tn-input>
					</view>
					<view class="tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
						<tn-input placeholder="姓名" name="input" v-model="cash.name" inputAlign="left"></tn-input>
					</view>
					<view class="tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
						<tn-input placeholder="开户支行" name="input" v-model="cash.remark" inputAlign="left"></tn-input>
					</view>
		
					<view class='tn-color-red tn-padding-top-sm'>*提现账号请与实名信息一致！！！</view>
					
				</view>				
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="setAccountMoney()">
						<text class="tn-color-white" >保 存</text>
					</tn-button>
				</view>
			</view>
		</tn-modal>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import request from '@/common/request.js';
	export default {
		name: 'TemplateIntegral',
		mixins: [template_page_mixin],
		data() {
			return {
				wallet:{},
				show1: false,
				cash:{
					money:0,
					account:'',
					remark:'',
					name:''
				},
				walletInfo:{}
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			loadData() {
				let user = uni.getStorageSync("userinfo");
				//加载钱包信息
				request.get("/xxc/wallet/info/"+user.userId).then((res) => {
					this.wallet = res.data;
					this.cash.account = this.wallet.account;
					this.cash.remark = this.wallet.remark;
				});
				
				request.get("/xxc/walletInfo/list?userId="+user.userId).then((res) => {
					this.walletInfo = res.rows;
				});
			},
			setAccountMoney(){
				this.wallet.account = this.cash.account;
				this.wallet.remark = this.cash.remark + this.cash.name;
				request.post("/xxc/wallet/editInfo",this.wallet).then((res) => {
					uni.showModal({
						title: '提示：',
						content: res.msg,
						success: function(res) {
							uni.reLaunch({
								url: '/minePages/withdraw'
							})
						}
					});
				});

			},
			cashAccount(){
				
				if(this.cash.money < 100){
					uni.showModal({
						title: '提示：',
						content: "提现金额不能小于100！",
					});
					return;
				}
				if(this.cash.money > this.wallet.yuE){
					uni.showModal({
						title: '提示：',
						content: "余额不足！",
					});
					return;
				}
				this.wallet.account = this.account;
			
				request.post("/xxc/cash",this.cash).then((res) => {
					uni.showModal({
						title: '提示：',
						content: '操作成功,等待审核!',
						success: function(res) {
							uni.reLaunch({
								url: '/minePages/withdraw'
							})
						}
					});
				});
			
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 页面 start*/
	.integral-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 阴影 start*/
	.tn-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.integral-wrap {
		position: relative;
		z-index: 1;
	}

	/* 页面 end*/

	/* 翘边阴影*/
	.shadow-warp {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.01);
	}

	.shadow-warp:before,
	.shadow-warp:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
		transform: rotate(-3deg);
		z-index: -1;
	}

	.shadow-warp:after {
		right: 20rpx;
		left: auto;
		transform: rotate(3deg);
	}

	// 银行卡
	.button-vip {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
		}
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
</style>